<template>
	<view class="container">
		<navbar title="发表评价"></navbar>
		<view class="wrap">
			<view class="post-wrap">
				<view v-for='(item,index) in orderList' >
					<view class="post-item">
						<view class="goods-wrap">
							<apply-goods-item :item='item.goodsItem'></apply-goods-item>
						</view>
						<view class="rate">
							<text>综合评分</text><uni-rate v-model="item.star" :margin="4" :touchable="true" size="16"
								active-color="#FF1A54" />
						</view>
						<view class="line"></view>
						<view class="textarea">
							<textarea maxlength='-1' placeholder="描述商品和使用感受" v-model="item.desc"
								placeholder-style="font-size:26rpx;color:#A1A1A1"></textarea>
						</view>
						<view class="upload-file">
							<zlxls-upload-img ref="zlxlsUploadImg" @uploaded="uploaded(index,$event)" :imgList="imgList"
								:maxCount="9" :autoUpload='true' :tapModel="'replace'" :header="header"
								:uploadUrl="uploadUrl"></zlxls-upload-img>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer-btn">
				<button class="btn line-center" :disabled="isDisabled" :loading="isDisabled"
					@tap='postComment'>{{btnText}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import zlxlsUploadImg from "@/components/zlxls-upload-img/zlxls-upload-img.vue";
	import applyGoodsItem from "../components/apply-goods-item.vue";
	export default {
		components: {
			zlxlsUploadImg,
			applyGoodsItem
		},
		data() {
			return {
				orderId: '',
				orderList: [],
				formList: [],
				rateValue: 0,
				uploadUrl: '',
				imgList: [],
				header: {},
				allSlideImg: '',
				isDisabled: false,
				btnText: '提交评价',
				fromPage:1,
			};
		},
		onLoad(option) {
			this.orderId = option.order_id ? option.order_id : '';
			this.fromPage = option.type;
			this.header = {
				"Authorization": uni.getStorageSync('TOKEN') ? uni.getStorageSync('TOKEN') : ""
			};
			this.uploadUrl = `${app.globalData.hostUrl}/${app.getApi().baseApi.upload}`;
			console.log('uploadUrl', this.uploadUrl)
			this.getOrderDetail()
		},
		methods: {
			getOrderDetail() {
				const that = this;
				app.globalRequest({
					api: app.getApi().order.orderDetail,
					data: {
						order_id: that.orderId
					}
				}).then(res => {
					that.loadingPage = false;
					if (res.code == 0) {
						let orderGoods = res.data.orderGoods.filter(v=>{
							return v.is_comment == 0 && v.is_refund == 0
						})
						console.log('orderGoods',orderGoods)
						that.orderList = orderGoods.map((v, i) => {
							return {
								star: 0,
								desc: '',
								imageList: [],
								goodsItem: v
							}
						})
						console.log('that.orderList',that.orderList)
						that.formList = orderGoods.map((v, i) => {
							return {
								goods_id: v.goods_id,
								order_goods_id: v.order_goods_id,
								star: 0,
								desc: "",
								imageList: []
							}
						})
						console.log('that.formList', that.formList)
					}
				})
			},
			uploaded(index, _res) {
				this.orderList[index].imageList = _res.allImages.join("|")
				this.formList[index].imageList = _res.allImages.join("|");
			},
			postComment() {
				let that = this;
				this.orderList.forEach((v, i) => {
					this.formList[i].star = v.star;
					this.formList[i].desc = v.desc;
				})
				console.log('this.formList', this.formList)
				this.isDisabled = true;
				this.btnText = '提交中，请稍候...';
				app.globalRequest({
					api: app.getApi().order.comment,
					method: 'POST',
					data: {
						order_id: this.orderId,
						form: this.formList,
					}
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						this.isDisabled = false;
						this.btnText = '提交评价';
						if(that.fromPage == 1){
							const pages = getCurrentPages(); // 当前页面
							const beforePage = pages[pages.length - 2]; // 前一个页面
							console.log("beforePage", beforePage);
							beforePage.$vm.page = 1;
							beforePage.$vm.totalPage = '';
							beforePage.$vm.list = [];
							beforePage.$vm.tabType = 'all';
							beforePage.$vm.getList();
							uni.navigateBack({
								delta: 1
							})
						}else{
							const pages = getCurrentPages(); // 当前页面
							const beforePage = pages[pages.length - 2]; // 前一个页面
							console.log("beforePage", beforePage);
							beforePage.$vm.getOrderDetail();
							uni.navigateBack({
								delta: 1
							})
						}
					} else {
						this.isDisabled = false;
						this.btnText = '提交评价';
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.post-wrap {
		margin: 0rpx 24rpx 0;
		padding-bottom: 200rpx;
	}

	.post-item {
		padding: 28rpx 0rpx 36rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 28rpx;

		.rate {
			padding: 0 24rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			margin-top: 48rpx;

			text {
				margin-right: 24rpx;
			}
		}
	}

	.goods-wrap {
		padding: 0 24rpx;

	}

	.line {
		padding: 40rpx 0 0;
		border-bottom: 1px dotted #D2D2D2;
	}

	.textarea {
		margin: 24rpx;

		textarea {
			width: 100%;
		}
	}

	.upload-file {
		margin: 0 24rpx;
	}

	.upload-text {
		display: flex;
		flex-direction: column;

		text {
			font-size: 26rpx;
		}
	}

	.footer {
		width: 100%;
		height: 110rpx;
		background: transparent;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index: 2;

		.footer-btn {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 640rpx;
				height: 94rpx;
				background: #52B148;
				border-radius: 48rpx;
				font-size: 32rpx;
				color: #fff;
			}
		}
	}
</style>